<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
    // 在版本18中是异步的，在之前的版本中有可能是同步（定时器或promise）
    class App extends React.Component{
        state = {
            num:1
        }
        render(){
            return (
                <button onClick={()=>{
                    // this.setState({
                    //     num:this.state.num+1
                    // })
                    // console.log(this.state.num);// 1

                    // setTimeout(()=>{
                    //     this.setState({
                    //         num:this.state.num+1
                    //     })
                    //     console.log(this.state.num);// 1
                    // })

                    Promise.resolve().then(value=>{
                            this.setState({
                                num:this.state.num+1
                            })
                            console.log(this.state.num);// 1
                    })
                }}>{this.state.num}</button>
            )
        }
    }
   ReactDOM.render(<App/>,document.querySelector("#root"));
</script>
</html>